.notice{
    width:100%;
    text-align: center;
    padding:20px 0px;
    background-color: #D9AFD9;
    background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
    color:#fff;
}

.notice > .title{
    width:100%;
    font-size:16px;
    font-weight: bold;
    margin-bottom:5px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notice > .title > sup{
    color:rgb(255, 45, 45);
    font-size:16px;
}

.notice > .tip{
    display: flex;
    width:100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size:14px;
    margin-bottom: 10px;
}

.notice > .tip > .left{
    margin-right:10px;
}

.notice > .tip > .left > .nums{
    color:rgb(255, 45, 45);
    margin:0px 5px;
    font-size:20px;
}

.notice > .tip > .right{
    display: flex;
    align-items: center;
    align-content: center;
    margin-top:4px;
}
.notice > .tip > .right > span{
    display: inline-block;
    background:#000;
    font-size:14px;
    text-align: center;
    color:#fff;
    width:1.5em;
    border-radius: 5px;
    margin:0px 3px;
}

.notice > .tip > .right > span:last-of-type{
    background:rgb(255, 45, 45);
}

.notice > .people{
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    width:50%;
    flex-wrap: nowrap;
    margin:0 auto;
}

.notice > .people > div{
    width:20%;
    height:20%;
    border-radius: 100%;
    overflow: hidden;
}

.notice > .people > .avatar > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notice > .people > .nobody{
    height:3em;
    background:#d7d7d7;
}

.box{
    width:100%;
    background: #f4f4f4;
}


.shop{
    width:100%;
    display: flex;
    overflow: hidden;
    padding:16px;
    background:#fff;
    margin:8px 0px;
}

.shop > .logo{
    width:12%;
    border-radius: 5px;
    overflow: hidden;
    margin-right:10px;
    flex-shrink: 0;
}

.shop > .logo > img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.shop > .info{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}

.shop > .info > .link{
    position: absolute;
    right:0;
    top:30%;
    color:#8a8b8b;
}

.shop > .info > div{
    width: 100%;
}

.shop > .info > .name{
    font-size:14px;
    line-height: 1;
    margin-top:5px;
    font-weight: bold;
}

.shop > .info > .amount{
    font-size:12px;
    color:#0e0e0f;
}

.order{
    width:100%;
    padding:0% 2%;
    background:#fff;
}

.order > .title{
    width:100%;
    font-weight: 700;
    padding: 16px 0px;
    font-size: 16px;
    color: #303133;
}

.order > .OrderInfo{
    --font-size:14px;
}















.food{
    width:100%;
    padding:0% 2%;
    background:#fff;
}

.food > .title{
    width:100%;
    font-weight: 700;
    padding: 16px 0px;
    font-size: 16px;
    color: #303133;
}

.food > .list{
    width:100%;
    background:#fff;
    padding-bottom:20px;
}

.food > .list > .item{
    width:100%;
    margin:0 auto;
    margin-bottom:10px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
}

.food > .list > .item > .thumb{
    width:30%;
    flex-shrink: 0;
    margin-right:10px;
    border-radius: 5px;
    overflow: hidden;
}

.food > .list > .item > .thumb > img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.food > .list > .item > .info > div{
    margin-bottom:5px;
}

.food > .list > .item > .info > .title{
    font-size:16px;
    color:#000;
    font-weight: bold;
}

.food > .list > .item > .info > .price{
    color:rgb(165, 26, 26);
    font-size:14px;
}

.food > .list > .item > .info > .btn{
    display: block;
    width:20%;
}


